const oApp = document.getElementById('app')

function handleRouter() {
  const hash = window.location.hash.substring(1)
  console.log(hash)
  switch(hash) {
    case '':
    case '/':
    case '/home': 
      oApp.innerHTML = `
        <h1>home</h1>
        <button id="toListBtn">to list</button>
      `;
      bindEvent()
      break;
    case '/list':
      oApp.innerHTML = `
        <h1>list</h1>
        <button id="toHomeBtn">to home</button>
      `;
      bindEvent()
      break;
    default: oApp.innerHTML = `
      <h1>404 not found</h1>
    `;
  }
}

function handleToListBtnClick() {
  window.location.hash = '#/list'
}

function handleToHomeBtnClick() {
  window.location.hash = '#/'
}

function bindEvent() {
  const oToListBtn = document.getElementById('toListBtn')
  const oToHomeBtn = document.getElementById('toHomeBtn')
  oToListBtn && oToListBtn.addEventListener('click', handleToListBtnClick, false)
  oToHomeBtn && oToHomeBtn.addEventListener('click', handleToHomeBtnClick, false)
}

// 需要监听hash变化
window.addEventListener('hashchange', handleRouter, false)

handleRouter()
bindEvent()


